<!--
 * Description: commodity映射维护新增页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Dongxu.Ni
 * Date: 2020/04/14 02:52
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="80px" :model="formData" size="mini">
      <el-row>
        <el-col :span="24">
          <!--gcmFunction-->
          <el-form-item label="GcmFunction" label-width="130px">
            <el-select
              v-model="formData.gcmFunction"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
              style="width: 100%; height: 100%"
              @change="changeGcmFunction(formData.gcmFunction)"
              @clear="clearGcmFunction()"
            >
              <el-option
                v-for="item in $store.getters['enums/getGcmFunctionListOnly']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <!--分类-->
          <el-form-item label="Category" label-width="130px">
            <el-select
              v-model="formData.category"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
              style="width: 100%; height: 100%"
              @change="changeGcmFunction()"
            >
              <el-option
                v-for="item in $store.getters['category/getCategoryCollects']"
                :key="item.index"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <!--材料详细-->
          <el-form-item label="Material Detail" label-width="130px">
            <el-dropdown slot="label" trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                Material Detail
                <i style="color:red">{{ materialDetailTypeSign }}</i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">包含</el-dropdown-item>
                <el-dropdown-item command="0">等于</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-input
              v-model="formData.materialDetail"
              v-blur:desc="formData"
              clearable
              :placeholder="materialDetailInfo"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <!--材料-->
          <el-form-item label="Material Group" label-width="130px">
            <el-input v-model="formData.materialGroup" v-blur:desc="formData" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <!--商品-->
          <el-form-item label="Commodity" label-width="130px">
            <el-select
              v-model="formData.commodity"
              clearable
              :disabled="IsCommodity"
              filterable
              :placeholder="$t('select.placeholder')"
              style="width: 100%; height: 100%"
            >
              <el-option
                v-for="item in GcmFunctionCommodityList"
                :key="item.index"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button :loading="isRequesting" size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
import { commoditymapAdd } from '@/api/quote/commoditymap'
import { commodityList } from '@/api/quote/commodity'

export default {
  name: 'CommodityMapAdd',
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      formData: {
        materialDetailType: '0',
        materialDetail: '',
        materialGroup: ''
      },
      IsCommodity: true,
      GcmFunctionCommodityList: [],
      materialDetailInfo: '包含请用"|"符号分割',
      materialDetailTypeSign: '⊂'
    }
  },
  methods: {
    async save() {
      if (this.formData.materialDetailType === '0' && this.formData.materialDetail.includes('|')) {
        this.$message.error('输入属于包含关系,当前是等于')
      } else {
        try {
          this.isRequesting = true
          await commoditymapAdd(this.formData)
          this.$emit('save')
        } catch (error) {
          console.log(error)
        } finally {
          this.isRequesting = false
        }
      }
    },
    cancel() {
      this.$emit('cancel')
    },
    // 获取商品的列表
    async GetcommodityList(event) {
      try {
        await commodityList({ gcmFunction: event }).then(result => {
          this.GcmFunctionCommodityList = result.data
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 改变下拉框来获取映射
    changeGcmFunction(e) {
      this.IsCommodity = false
      this.GetcommodityList(e)
    },
    // gcm输入框清除的回调
    clearGcmFunction() {
      this.formData.commodity = ''
      this.IsCommodity = true
    },
    // 选择materialDetail类型
    handleCommand(command) {
      // 赋值来判断相应的
      this.formData.materialDetailType = command
      this.formData.materialDetail = ''
      command === '1'
        ? ((this.materialDetailInfo = '包含请用"|"符号分割'), (this.materialDetailTypeSign = '⊂'))
        : ((this.materialDetailInfo = '等于关系'), (this.materialDetailTypeSign = '='))
    }
  }
}
</script>

<style scoped></style>
